<!--
 * @author guojiteng
 -->
<template>
  <div id="select-appoint" v-loading="menuLoading">
    <el-tree
        ref="qsTree"
        class="qs-tree"
        :data="treeData"
        :props="defaultProps"
        :default-expanded-keys="['-1']"
        show-checkbox
        highlight-current
        :check-strictly="true"
        @check="treeCheckChange"
        node-key="id"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getChapterTree } from './api'
export default {
  name: 'SelectAppoint',
  props: {
    cId:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      menuLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'chapterName'
      },
    }
  },
  watch: {
  },
  created() {
    this.getMenu()
  },
  methods: {
    treeCheckChange(data, node) {
      this.$nextTick(() => {
        this.$refs.qsTree.setCheckedKeys([])
        this.$refs.qsTree.setChecked(data, true)
      })
    },
    /*
      params: 无
      return:无
      function:获取章节树
    */
    getMenu() {
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        getChapterTree({ courseId: this.cId }).then(response => {
          this.menuLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.menuLoading = false
        })
      })
    },

    /**
     * 保存提交数据
     */
    saveData() {
      const checkVal = this.$refs.qsTree.getCheckedNodes()
      const halfVal= this.$refs.qsTree.getHalfCheckedNodes()
      const valArr=[...checkVal,...halfVal]
      const id = valArr.map((item)=>{return item.id})[0]
      const name =valArr.map((item)=>{return item.chapterName})[0]
      const obj={
        id,
        name
      }
      this.$emit('subQs',obj)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#select-appoint {
  height: 500px;
  overflow: hidden;
  .qs-tree {
    height: 100%;
    overflow: auto;
  }
  .el-tree-node__content {
    margin-top: 5px;
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    color: #fff;
    &.gh {
      color: #ff7474;
      border: 1px solid #ff7474;
    }
    &.qy {
      color: #2fbcfb;
      border: 1px solid #2fbcfb;
    }
    &.bm {
      color: #ffa11c;
      border: 1px solid #ffa11c;
    }
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: "\E7A0";
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E7A2";
    font-size: 14px;
  }
}
</style>

